import React,{Component} from 'react';
import FileInputComponent from 'react-file-input-previews-base64';
import styles from './index.scss';
import CSSModules from 'react-css-modules';
import {getHeadPic} from '../../action';
import { connect} from 'react-redux';
import axios from 'axios';
/*
connect
action
mapStateToProps
connect(mapStateToPros,action)(Component)
*/
const mapStateToProps = state => {
  return {
    userpic: state.userpic,
  };
};
var fileArr = '';
class MyPicture extends React.Component {

  changeDate=()=>{
     if(this.refs.headImg.value!=''){
      this.refs.textimg.src = this.refs.headImg.value;
      fileArr               = this.refs.headImg.value;
      this.props.getHeadPic(fileArr);
    }
  }
  render(){
    return(
      <div styleName="head_pic clearfix">
          <div styleName="choose_pic">
              {/*<FileInputComponent
                labelText        = "选择图片"
                labelStyle       = {{fontSize:14}}
                multiple         = {false}
                callbackFunction = {(file_arr)=>{}}
                accept           = "image/*"/>*/}
                <input type="text" ref="headImg" placeholder="请输入头像地址" style={{width:"100%",height:30}}></input>
                <button onClick={this.changeDate} style={{width:"100%",height:30}}>请先预览</button>
          </div>
          <div styleName="current_pic">
            <div styleName="current_smpic">
              <img ref="textimg"></img>
            </div>
            <p>头像预览</p>
          </div>
          <div styleName="picinfo"><p>请选择图片上传</p>
          </div>
      </div>
    )
  }
}
const Picture = CSSModules(MyPicture, styles,{allowMultiple:true});
export default connect(
  mapStateToProps,
  {getHeadPic}
)(Picture);